<template>
  <div>
    <VueJsonSchema :initialSchema="schema" :data="data" />
  </div>
</template>

<script lang="ts">
import VueJsonSchema, {registerComponent} from './VueJsonSchema.vue'
import {message, Modal, notification, Button} from 'ant-design-vue';

registerComponent('button', Button);

export default {
  components: {
    VueJsonSchema,
  },
  data() {
    return {
      showM: false,
      data: {
        title11: '卡片标题1',
        showModal: false,
      },
      schema: [
        {
          com: 'a-card',
          data: {
            showQR: false,
          },
          body: [
            {
              com: 'a-qrcode',
              data: {
                qrcord: '112233'
              },
              props: {
                size: 256,
                show: '${showQR}'
              },
              modelValue: 'title11',
            }
          ],
          slots: {
            title: [
              {
                com: 'span',
                body: [
                  {
                    com: 'span',
                    body: [
                      {
                        com:'a-button',
                        body: 'aa'
                      },
                      {
                        com:'span',
                        body: 'bb'
                      }
                    ]
                  }
                ]
              },
              {
                com: 'a-button',
                props: {
                  type: 'primary',
                },
                events: {
                  click: "console.log('按钮haha 被点击', data);data.showQR = !data.showQR;"
                },
                body: '按钮haha'
              }
            ]
          }
        },
        {
          com: 'a-modal',
          comId: 'modalhao',
          props: {
            title: '模态框标题',
            open: '${showModal}'
          },
          events: {
            ok: (data: any) => {
              console.log('模态框状态变化');
              data.showModal = false;
            }
          },
        },
        {
          com: 'button',
          props: {
            type: 'primary',
          },
          events: {
            click: (data: any) => {
              console.log('按钮 11 被点击');
              data.showModal = true;
            }
          },
          body: '${title11}'

        },
        {
          com: 'a-input',
          props: {
            placeholder: '请输入内容'
          },
          modelValue: 'title11',
          events: {
            change: (data: any) => {
              console.log('输入框内容变化', data.title11)
            }
          }
        },
        {
          com: 'a-card',
          data: {
            title1: '卡片标题11',
            title2: '卡片标题22',
            title3: '${title1} | ${title2}'
          },
          props: {
            title: '${title11} | ${title2}11'
          },
          body: [
            {
              com: 'a-button',
              body: '${title2} 按钮 2${title1}',
              props: {
                type: 'default',
              },
              // beforeMount: 'console.log("beforeMount", data, refs, data.title11);data.title11 = data.title11 + "h";',
              events: {
                click:(data: any, refs: any, event: Event) => {
                  console.log('按钮 2 被点击', data, refs, event);
                  message.info('按钮 2 被点击');
                  data.title1 = data.title1 + '2';
                  data.title2 = data.title2 + '3';
                  data.title3 = data.title3 + '4';
                  data.title11 = data.title11 + '5';
                }
              }
            },
            {
              com: 'ul',
              data: {
                list: [
                  {
                    title: '标题1',
                    content: '内容1'
                  },
                  {
                    title: '标题2',
                    content: '内容2'
                  },
                  {
                    title: '标题3',
                    content: '内容3'
                  }
                ]
              },
              body: [
                {
                  com: 'div',
                  body: '${list.length} | ${list[1].title}'
                },
                {
                  com: 'a-button',
                  body: '添加',
                  fns: {
                    add: {
                      params: ['aa'],
                      content: "aa.list.push({title: '标题' + (aa.list.length + 1),content: '内容' + (aa.list.length + 1)});"
                    }
                  },
                  events: {
                    click: (data: any, refs: any, fns: any) => {
                      fns.add(data)
                    }
                  }
                },
                {
                  com: 'li',
                  forValue: 'list',
                  body: [
                    {
                      com: 'span',
                      body: '${item.title}'
                    },
                    {
                      com:'span',
                      body: '${item.content}'
                    },
                    {
                      com:'a-button',
                      body: '修改',
                      events: {
                        click: (data: any) => {
                          data.title1 = data.title1 + '修改';
                          data.item.title = data.item.title + '修改';
                          data.item.content = data.item.content + '修改';
                        }
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },
  mounted() {
    // 注册组件
    // this.$refs.vueJsonSchema.registerComponent('button', Button);
  }
};

</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>